<template>
    <div class="">
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>快速导入</span>
                </div>
            </div>
            <el-button size="medium" @click="handleEdit"><a :href="dloadUrl()">下载模板</a></el-button>
            <div class="pad_20">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                           :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                           :limit="1" :on-exceed="handleExceed" :file-list="fileList" :data="uploadData"
                           :auto-upload="true" :on-change="changeFile" accept=".xls,.xlsx">
                    <el-button size="medium" type="primary" class="el-button-small">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传xls,xlsx文件，且不超过200kb</div>
                </el-upload>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">导入</el-button>
        </div>
    </div>
</template>
<script>
    import index from '../../api/index';
    import {goodExcelPull,} from "@/api/good";

    export default {
        data() {
            return {
                fileList: [],
                upload: '',
                file: '',
                loading: false,
                uploadData: {
                    dataType: "0",
                    oldFilePath: "",
                },
            }
        },
        methods: {
            dloadUrl: function () {
                let backendPath = index.backendPath
                return backendPath + "channel/good/excel-down";
            },
            handleEdit() {

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            //文件超出的的提示
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            changeFile(file, fileList) {
                console.log(file, fileList)
                this.file = file
                this.fileList = fileList
                var This = this;
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = function (e) {
                    this.result // 这个就是base64编码了
                    This.imageUrl = this.result;
                    console.log('result', this.result)
                }
            },
            async onSubmit() {
                var formData = new FormData();
                let  storeId = sessionStorage.getItem('storeId') || ''
                formData.append("file", this.file.raw);
                formData.append("storeId", storeId);
                console.log('file', this.file.raw, formData)

                this.$api.post('channel/good/good-excel-pull', formData, res => {
                    if (res.code == 1) {
                        this.$message.success(res.msg);
                    } else {
                        this.$message.success(res.msg);
                    }
                });
                // const {msg} = await goodExcelPull(formData);
                // this.$baseMessage(msg, "success");
            }
        }
    }
</script>
